<template>
  <div id="screen-container">
    <div class="condition-screen bg-w border-r" v-if="screenShow">
      <a-form id="ant-form" ref="antFormRef">
        <div class="flex flex-align-items-center flex-wrap screen-list">
          <template v-for="(item, index) in nowFormItems">
            <!-- 文本框 -->
            <a-form-item v-if="item.type === 'input'" :label="item.label" :key="index">
              <a-input :placeholder="item.placeholder" v-model:value="item.value"
                oninput="value=value.replace(/\s+/g, ',')" />
            </a-form-item>
            <!-- 单选下拉框 -->
            <a-form-item v-if="item.type === 'select'" :label="item.label" :key="index">
              <a-select :placeholder="item.placeholder" allowClear v-model:value="item.value"
                :filter-option="filterOption">
                <a-select-option v-for="optionItem in item.list" :key="optionItem.key" :value="optionItem.key"
                  :title="optionItem.name">{{ optionItem.name }}</a-select-option>
              </a-select>
            </a-form-item>
            <!-- 多选下拉框 -->
            <a-form-item v-if="item.type === 'select-multiple'" :label="item.label" :key="index">
              <a-select :placeholder="item.placeholder" mode="multiple" allowClear v-model:value="item.value"
                :filter-option="filterOption" :maxTagCount="1">
                <a-select-option v-for="optionItem in item.list" :key="optionItem.key" :value="optionItem.key"
                  :title="optionItem.name">{{ optionItem.name }}</a-select-option>
              </a-select>
            </a-form-item>
            <!-- 多选树形结构下拉框 -->
            <a-form-item v-if="item.type === 'tree-select'" :label="item.label" :key="index">
              <a-tree-select :tree-data="item.list" :tree-checkable="item.isTreeCheckable" :maxTagCount="2"
                :show-checked-strategy="SHOW_PARENT" :placeholder="item.placeholder" v-model:value="item.value"
                :dropdownMatchSelectWidth="false" :filter-tree-node="treeFilterOption"
                @change="e => treeSelectChange(e, item.label)" />
            </a-form-item>
            <!-- 日期区间 -->
            <a-form-item v-if="item.type === 'range-picker'" :label="item.label" :key="index">
              <a-range-picker valueFormat="YYYY-MM-DD" v-model:value="item.value">
                <template #separator>→</template>
              </a-range-picker>
            </a-form-item>
          </template>
        </div>
        <div class="btns flex flex-align-items-center" :class="isRight ? 'btn-right' : ''">
          <i class="iconfont icon-shuangjiantoushang" @click="screenShowChange"
            v-if="nowFormItems && nowFormItems.length > 3"></i>
          <a-button type="primary" size="small" @click="screenConfirm" class="w-65">查询</a-button>
          <a-button size="small" @click="screenReset" class="w-65">重置</a-button>
        </div>
      </a-form>
    </div>

    <div class="condition-screen-hide bg-w border-r" v-else>
      <div class="condition-list flex flex-wrap">
        <template v-for="(item, index) in confirmFormItems">
          <p v-if="(item.value && item.value.length > 0) ||
            (item.type === 'select' && (item.value !== null || item.value !== undefined))
            " :key="index">
            {{ item.label + "：" + item.desc }}
          </p>
        </template>
      </div>
      <a-button type="link" size="small" @click="screenShowChange">
        展开筛选条件
        <i class="iconfont icon-xiashuangjiantou"></i>
      </a-button>
    </div>
  </div>
</template>
<script setup>
import { defineProps, ref, onMounted, watch, defineEmits } from "vue";
import Bus from "@/utils/bus";
import { TreeSelect } from "ant-design-vue";
const SHOW_PARENT = TreeSelect.SHOW_PARENT;

const props = defineProps(['formItems']);
const emit = defineEmits(['screenConfirm']);
let nowFormItems = ref(JSON.parse(JSON.stringify(props.formItems)));
let confirmFormItems = ref(JSON.parse(JSON.stringify(props.formItems)));

let screenShow = ref(true);
let isRight = ref(false);
const antFormRef = ref(null);

// 获取选中的tree数据
const getSelectOrganization = (list, id) => {
  let name = null;
  list.forEach(m => {
    if (m.value === id) {
      name = m.title;
    }
    if (m.children && name === null) {
      name = getSelectOrganization(m.children, id);
    }
  });
  return name;
};
// 获取已选择条件的中文
const queryScreenChinese = () => {
  confirmFormItems.value = confirmFormItems.value.map(item => {
    if (item.type === "select" && (item.value !== null || item.value !== undefined)) {
      item.desc = item.list.find(m => {
        return m.key == item.value;
      }).name;
    } else if (
      item.type === "select-multiple" &&
      item.value &&
      item.value.length > 0
    ) {
      let descList = [];
      item.value.forEach(item1 => {
        descList.push(item.list[item1].name);
      });
      item.desc = descList.join("/");
    } else if (
      item.type === "tree-select" &&
      item.value &&
      item.value.length > 0
    ) {
      let descList = [];
      item.value.forEach((item1) => {
        const name = getSelectOrganization(item.list, item1);
        descList.push(name);
      });
      item.desc = descList.join("/");
    } else if (
      item.type === "range-picker" &&
      item.value &&
      item.value.length > 0
    ) {
      item.desc = item.value.join(" ~ ");
    } else if (item.type === "input") {
      item.desc = item.value;
    }
    return item;
  });
};
// 展开或隐藏条件
const screenShowChange = () => {
  if (screenShow.value) {
    queryScreenChinese();
  }
  screenShow.value = !screenShow.value;
  calculateTableHeight();
};
// 点击查询
const screenConfirm = () => {
  confirmFormItems.value = [...nowFormItems.value];
  emit("screenConfirm", confirmFormItems.value);
};
// 重置条件
const screenReset = () => {
  const list = JSON.parse(JSON.stringify(props.formItems));
  nowFormItems.value = list;
  confirmFormItems.value = list;
  emit("screenConfirm", list);
};
// 计算宽度，调整按钮位置
const calculateFormWidth = () => {
  if (!screenShow.value) {
    return;
  }
  const antForm = antFormRef.value;
  const clientWidth = antForm.clientWidth;
  const colCount = Math.floor(clientWidth / 422);
  const remainder = clientWidth % 422;
  if (
    (props.formItems.length % colCount === 0 && remainder > 220) ||
    props.formItems.length % colCount !== 0
  ) {
    isRight.value = true;
  } else {
    isRight.value = false;
  }
};
// 计算table高度
const calculateTableHeight = () => {
  setTimeout(() => {
    Bus.emit("tableHeightChange", true);
  }, 10);
};
// 单选框下拉框搜索
const filterOption = (input, option) => {
  return option.title.indexOf(input) >= 0;
};
// 树选择下拉框搜索
const treeFilterOption = (input, option) => {
  return option.title.indexOf(input) >= 0;
};
// tree-select改变
const treeSelectChange = (e, label) => {
  const obj = props.formItems.filter(
    item => item.label === label
  )[0];
  nowFormItems.value = nowFormItems.value.map(item => {
    if (item.key === obj.nextName) {
      item.list = [];
      item.value = null;
    }
    return item;
  });
  if (obj.nextName) {
    obj.change(e).then(res => {
      nowFormItems.value = nowFormItems.value.map(item => {
        if (item.key === obj.nextName) {
          item.list = res;
        }
        return item;
      });
    });
  }
};

watch(
  () => props.formItems,
  newVal => {
    const newFormItems = JSON.parse(JSON.stringify(newVal))
    nowFormItems.value = [...newFormItems];
    confirmFormItems.value = [...newFormItems];
    if (screenShow.value) {
      calculateFormWidth();
    } else {
      queryScreenChinese();
    }
    calculateTableHeight();
  }
);

onMounted(() => {
  calculateFormWidth();
});
</script>
<style lang="less" scoped>
#screen-container {
  margin-bottom: 16px;
}

.condition-screen {
  padding: 4px 16px 16px 16px;
  position: relative;

  #ant-form {
    position: relative;
  }

  .screen-list {
    overflow: hidden;
  }

  .ant-form-item {
    margin-right: 10px;
    margin-bottom: 0;
    margin-top: 12px;
    width: 26%;

    /deep/.ant-form-item-label {
      width: 112px;
      text-align: right;

      label {
        color: #262626;
        font-size: 13px;
      }
    }

    /deep/.ant-input,
    /deep/.ant-select,
    /deep/.ant-picker {
      width: 100%;
    }

    /deep/.ant-select-multiple .ant-select-selection-item-content {
      line-height: 24px;
    }
  }

  .btns {
    text-align: right;
    width: 22%;
    margin-top: 32px;
    flex-direction: row-reverse;

    &.btn-right {
      position: absolute;
      right: 0;
      bottom: 0;
    }

    .icon-shuangjiantoushang {
      color: #b8b8b8;
      font-size: 12px;
      margin-left: 8px;
      cursor: pointer;
    }

    .ant-btn {
      height: 32px;
      margin-left: 8px;
    }
  }
}

.condition-screen-hide {
  position: relative;
  padding: 17px 140px 17px 32px;
  min-height: 58px;

  .condition-list {
    p {
      color: #262626;
      margin-right: 50px;
    }
  }

  .ant-btn {
    position: absolute;
    right: 24px;
    top: 50%;
    margin-top: -12px;
  }

  .iconfont {
    font-size: 12px;
    margin-left: 8px;
  }
}
</style>
